<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,index) in statisticsData" :key="item.title">
        <statistics-card
          :icon="icon[index]"
          :color="color[index]"
          :title="item.title"
          :number="item.total"
        />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <existence-emp-charts />
      </el-col>
      <el-col :span="12">
        <station-emp-charts />
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <entry-charts />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StatisticsCard from "./components/StatisticsCard";
import EntryCharts from "./components/EntryCharts";
import { statisticsDataMonthApi } from "@/api/statistics";
import ExistenceEmpCharts from "./components/ExistenceEmpCharts";
import StationEmpCharts from "./components/StationEmpCharts";
export default {
  name: "Home",
  data() {
    return {
      statisticsData: [],
      icon: [
        "iconfont iconyaoqingyuangong",
        "iconfont iconrenyuanlikai",
        "iconfont icondrxx16",
        "iconfont icontubiaozhizuomoban",
      ],
      color: ["#2980b9", "#8e44ad", "#27ae60", "#e74c3c"],
    };
  },
  created() {
    this.getStatisticsData();
  },
  methods: {
    async getStatisticsData() {
      const { data, code } = await statisticsDataMonthApi();
      if (code !== 200) return;
      this.statisticsData = data;
    },
  },
  components: {
    StatisticsCard,
    EntryCharts,
    ExistenceEmpCharts,
    StationEmpCharts,
  },
};
</script>

<style scoped lang="scss">
.statistics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.statistics:hover {
  .icon {
    background-color: rgb(14, 158, 241);

    i {
      color: #fff;
    }
  }
}
.icon {
  transition: all 0.2s;
  width: 78px;
  height: 78px;
  border-radius: 6px;
  text-align: center;
  i {
    line-height: 1.3;
    font-size: 60px;
    color: rgb(14, 158, 241);
    text-align: center;
  }
}
.data {
  .title {
    font-size: 16px;
    color: rgb(209, 209, 209);
    font-weight: 600;
    margin-bottom: 4px;
  }
  span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
  }
}
</style>
